<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>上下左右键控制色块移动</title>
  <style>
	td{
		width:30px;
		height:20px;
	}
	.mytd{
		background: #ff0000;
	}
  </style>
 </head>
 <body onkeyup="paintMove(event)">
	<div>上下左右键控制色块移动</div>
	<table id="show" border="1"></table>
    <script type="text/javascript">
	var rows = 20;
	var cols = 30;

	var node = '';
	for(var r=1;r<=rows;r++){
		node += '<tr>';
		for(var c=1;c<=cols;c++){
			node += '<td id="'+r+'_'+c+'">&nbsp;</td>';
			
		}
		node += '</tr>';
	}
	document.getElementById('show').innerHTML = node;

	//随机产生一个位置，并赋色
	var r_row = Math.floor(Math.random()*rows+1);
	var r_cols = Math.floor(Math.random()*cols+1);
	//alert("随机产生的位置："+(r_row+'_'+r_cols));
	
	var tdNode= document.getElementById(r_row+'_'+r_cols);
	tdNode.setAttribute("class","mytd"); //产生色块的td上有一个 class="mytd" 的属性值；


	function paintMove(event){
		var code = event.keyCode;
		if(code == 37){  //left ←  
			if(r_cols>1){
				r_cols--;
			}
		}else if(code == 38){ //top  ↑
			if(r_row>1){
				r_row--;
			}
		}else if(code == 39){ //right  →  
			if(r_cols<cols){
				r_cols++;
			}
		}else if(code == 40){ //middle   ↓
			if(r_row<rows){
				r_row++;
			}
		}

		//该边界的判断是有问题的（最左边界，只是不能左移但可以上右下移动.....）
		/**
		if(r_row==1||r_row==rows || r_cols==1 || r_cols==cols){
			alert("色块已到达边界，不能再次移动了");
			return ;
		}*/

		//清空原色块
		tdNode.removeAttribute("class");
		//赋值新色块
		tdNode= document.getElementById(r_row+'_'+r_cols);
		tdNode.setAttribute("class","mytd");
	}
	

    </script>
 </body>
</html>
